<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ include file="/taglibs.jsp" %>
<debug:filename/>

<!-- Buttons for Development & Debugging ------------------------------------------------------------->
<div class="btn-group" style="position:absolute;top:0px;z-index:9999">
    <a class="btn btn-mini" data-toggle="modal" href="login-beta.jsp#modal-welcome-beta">Launch Welcome (beta) modal</a>
    <a class="btn btn-mini" data-toggle="modal" href="login-beta.jsp#modal-klout-sign-in">Klout Sign In</a>
    <a class="btn btn-mini" data-toggle="modal" href="login-beta.jsp#modal-klout-error">Klout Sign In (error)</a>
    <a class="btn btn-mini" data-toggle="modal" href="login-beta.jsp#modal-klout-success">Klout Sign In (success)</a>
    <a class="btn btn-mini" data-toggle="modal" href="login-beta.jsp#modal-request-an-invite">Request an invite</a>
    <a class="btn btn-mini" data-toggle="modal" href="login-beta.jsp#modal-request-an-invite-success">Request an invite (success)</a>
    <a class="btn btn-mini" data-toggle="modal" href="login-beta.jsp#modal-request-an-invite-thankyou">Request an invite (thankyou)</a>
    <a class="btn btn-mini" data-toggle="modal" href="login-beta.jsp#modal-jasu-sign-in">Jasu Sign In</a>
</div>


<!-- Modal: Welcome (beta) ------------------------------------------------------------->
<bootstrap:modal id='modal-welcome-beta' fadeIn='true' closeButton='true'>
    <div align="center">
        <h1>Welcome to the style universe</h1>
        <br/>
        <p>Sign in with your Klout score of 35 or above, or request an invitation.</p>
        <a class="btn btn-inverse btn-large btn-primary"
           id="button-klout-sign-in"
           href="login-beta.jsp#modal-klout-sign-in"
           style="width:294px">
            SIGN IN WITH <b>KLOUT</b>
        </a>
        <div class="clearfix"></div>
        <div style="margin-top:10px">
            <span>- OR -</span>
            <p>You can request an invitation to join the JASU Style Universe.</p>
            <a class="btn" id="button-request-an-invite"
               href="login-beta.jsp#modal-request-an-invite">
                Request an invitation</a>
        </div>
        <br/>
        <p>Received an invite to Jasu?</p>
        <a href="login-beta.jsp#" id="button-jasu-sign-in1" class="btn">Sign in Jasu now</a>
        <br/>
    </div>
</bootstrap:modal>


<!-- Modal: Klout Sign in ------------------------------------------------------------->
<bootstrap:modal id='modal-klout-sign-in' fadeIn='true' closeButton='true'>

    <h3>Klout Sign in</h3>

    <p>Sign in with your Klout score of 35 or above, or <a href="login-beta.jsp#modal-request-an-invite">request an invitation.</a></p>

    <form class="form-horizontal">
      <fieldset>
        <div class="control-group">
          <label class="control-label" for="input01">Username:*</label>
          <div class="controls">
            <input type="text" class="input-xlarge" id="input01">
          </div>
        </div>
        <div class="control-group error">
          <label class="control-label" for="input02">Password:*</label>
          <div class="controls">
            <input type="password" class="input-xlarge" id="input02">
            <span class="help-inline">Please correct the error</span>
            <br/><br/>
          </div>
        </div>
      </fieldset>

    </form>

    <a href="login-beta.jsp#" id="button-klout-success" class="btn btn-inverse btn-primary pull-right">Sign In (successfully)</a>
    or
    <a href="login-beta.jsp#" id="button-klout-error" class="btn btn-inverse btn-primary pull-right">Sign In (error)</a>

</bootstrap:modal>



<!-- Modal: Klout Sign in (Sucessfully) ------------------------------------------------------------->
<bootstrap:modal id='modal-klout-success' fadeIn='true' closeButton='true'>

    <h3>Welcome!</h3>

    <p><b>You have a Klout score of  <b style="color:orangered;font-size:18px">35</b></b></p>
    <p>Invite 3 of your friends to join you when exploring the JASU Style Universe.</p>

    <form class="well">

        <div class="row-fluid">
          <div class="span4">
              <div class="control-group success">
                  <label>(1st) Friend's Name:</label>
                  <input type="text" class="span10" value="Ruth Perena">
                  <label>(1st) Friend's Email:</label>
                  <input type="text" class="span10" value="ruth.perena@jasu.com.au">
                  <span class="help-inline">This email is a valid</span>
              </div>
          </div>
          <div class="span4">
              <div class="control-group error">
                  <label>(2nd) Friend's Name:</label>
                  <input type="text" class="span10">
                  <label>(2nd) Friend's Email:</label>
                  <input type="text" class="span10">
                  <span class="help-inline">This email is invalid, please try again</span>
              </div>
          </div>
          <div class="span4">
              <div class="control-group">
                  <label>(3rd) Friend's Name:</label>
                  <input type="text" class="span10">
                  <label>(3rd) Friend's Email:</label>
                  <input type="text" class="span10">
                  <span class="help-inline"></span>
              </div>
          </div>
        </div>

    </form>
    <a href="login-beta.jsp#" id="button-klout-sign-in" class="btn pull-left">Skip & Sign in Jasu now</a>
    <a href="login-beta.jsp#" id="button-request-an-invite-thankyou" class="btn btn-inverse btn-primary pull-right">Invite (successfully)</a>

</bootstrap:modal>

<!-- Modal: Klout Sign in (error)  ------------------------------------------------------------->
<bootstrap:modal id='modal-klout-error' fadeIn='true' closeButton='true'>
    <h1>Sorry.</h1>
    <p>Your Klout score needs to be 35 or above</p>
    <p>You can request an invitation by entering your address below</p>
      <div class="control-group">
          <label>Your Name:</label>
          <input type="text" class="">
          <label>Your Email:</label>
          <input type="text" class="">
          <span class="help-inline"></span>
      </div>

    <a href="login-beta.jsp#" id="button-sent-invites-thankyou" class="btn btn-inverse btn-primary pull-right">Request an invite</a>

</bootstrap:modal>

<!-- Modal: Klout Request an invite (thank you) ------------------------------------------------------------->
<bootstrap:modal id='modal-sent-invites-thankyou' fadeIn='true' closeButton='true'>

    <h1>Thank you</h1>
    <br/>
    <div class="alert alert-success">
    Your 3 invitations have been sent. Your invitees will receive an email for acceptance shortly.
    </div>
    <p>In the meantime follow the JASU Style Universe to keep up to date.</p>
    <a class="btn" href="login-beta.jsp#"><i class="icon-heart"></i> Facebook</a>
    <a class="btn" href="login-beta.jsp#"><i class="icon-heart"></i> Twitter</a>
    <a class="btn" href="login-beta.jsp#"><i class="icon-heart"></i> Pinterest</a>
    <a class="btn" href="login-beta.jsp#"><i class="icon-heart"></i> GooglePlus</a>

    <a href="login-beta.jsp#" id="button-klout-sign-in" class="btn btn-inverse pull-right">Sign in Jasu now</a>

</bootstrap:modal>

<!-- Modal: JASU Request an invite ------------------------------------------------------------->
<bootstrap:modal id='modal-request-an-invite' fadeIn='true' closeButton='true'>
    <h1>Request an invite</h1>
    <p>Request an invitation by entering your address below</p>
      <div class="control-group">
          <label>Your Name:</label>
          <input type="text" class="">
          <label>Your Email:</label>
          <input type="text" class="">
          <span class="help-inline"></span>
      </div>

    <a href="login-beta.jsp#" id="button-request-an-invite-thankyou" class="btn btn-inverse btn-primary pull-right">Request an invite</a>
</bootstrap:modal>

<!-- Modal: JASU Request an invite (success) ------------------------------------------------------------->
<bootstrap:modal id='modal-request-an-invite-thankyou' fadeIn='true' closeButton='true'>
    <h1>Thank you</h1>
    <br/>
    <div class="alert alert-success">
    Your request for an invitation have been sent. Your invite will receive an email for acceptance shortly.
    </div>
    <p>In the meantime follow the JASU Style Universe to keep up to date.</p>
    <a class="btn" href="login-beta.jsp#"><i class="icon-heart"></i> Facebook</a>
    <a class="btn" href="login-beta.jsp#"><i class="icon-heart"></i> Twitter</a>
    <a class="btn" href="login-beta.jsp#"><i class="icon-heart"></i> Pinterest</a>
    <a class="btn" href="login-beta.jsp#"><i class="icon-heart"></i> GooglePlus</a>

    <a href="login-beta.jsp#" id="button-jasu-sign-in2" class="btn btn-inverse pull-right">Sign in Jasu now</a>
</bootstrap:modal>


<!-- Modal: JASU Sign in ------------------------------------------------------------->
<bootstrap:modal id='modal-jasu-sign-in' fadeIn='true' closeButton='true'>
    <h3>Jasu Sign in</h3>

    <p></p>

    <form class="form-horizontal">
      <fieldset>
        <div class="control-group">
          <label class="control-label" for="input01">Username:*</label>
          <div class="controls">
            <input type="text" class="input-xlarge">
          </div>
        </div>
        <div class="control-group error">
          <label class="control-label" for="input02">Password:*</label>
          <div class="controls">
            <input type="password" class="input-xlarge">
            <span class="help-inline">Please correct the error</span>
            <br/><br/>
          </div>
        </div>
      </fieldset>

    </form>

    <a href="login-beta.jsp#" data-dismiss="modal" class="btn btn-inverse btn-primary pull-right">Sign In</a>

</bootstrap:modal>


